<template>
	<view class="mian">
		<view class="top_bg">
			<view class="lef">
				<image class="zuojian" @click="$p.back()" src="http://img.cpgm.cc/panda/static/my/zuo.png"
					mode="widthFix"></image>
				<view class="max">
					中奖名单谁都有！
				</view>
				<view class="min">
					中奖名单实时更新中～
				</view>
			</view>
			<image src="http://img.cpgm.cc/panda/static/duoBao/xiaol.png" class="xiaol" mode="widthFix"></image>
		</view>
		<!-- <Header title=" "></Header> -->

		<!-- 下面的列表 -->
		<view class="xia_body">
			<view class="title">
				<view class="yong">
					用户
				</view>
				<view class="qishu">
					期数
				</view>
				<view class="huode">
					中奖获得
				</view>
			</view>
			<scroll-view lower-threshold="50" @scrolltolower="scrolltolower" style="height: 100%;" scroll-y="true">
				<view class="list_son" v-for="(item,index) in listdata" :key="index">
					<view class="left">
						<image :src="item.wx_img?item.wx_img:'http://img.cpgm.cc/panda/static/login/logo.png'"
							class="touxiang" mode="widthFix"></image>
						<text>{{item.wx_nickname?item.wx_nickname:'潮玩新人'}}</text>
					</view>
					<view class="cneter">
						{{item.remark}}
					</view>
					<view class="right">
						<image :src="imgurl + item.img" class="jiang" mode="widthFix"></image>
						<text>{{item.name}}</text>
					</view>
				</view>

				<view v-if="listdata.length==0" class="empty">
					<image src="http://img.cpgm.cc/panda/static/public/empty.png" mode="widthFix"></image>
					<text>没有数据哦~</text>
				</view>
				<u-loadmore v-else :status="status" :icon-type="iconType" :load-text="loadText" />
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import config from '@/common/config/index.js'
	export default {
		data() {
			return {
				imgurl: config.imgurl,
				headerimgurl: config.headerimgurl,
				list: ['', '', '', ''],
				listdata: [],
				page: 1,
				max_page: 1,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '上拉加载',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
			}
		},

		onLoad() {
			this.rewardLogs()
		},
		methods: {
			// 点击返回
			fanhui() {
				uni.navigateBack()
			},
			// 滑动到底部
			scrolltolower() {
				if (this.page >= this.max_page) {
					this.status = 'nomore'
				} else {
					this.status = 'loading';
					this.page = ++this.page;
					this.rewardLogs();
					setTimeout(() => {
						if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
						else this.status = 'loading';
					}, 500)
				}

				// if (this.page >= this.max_page) {
				// 	this.status = 'nomore'
				// 	return;
				// }
				// this.status = 'loading';
				// this.page = ++this.page;
				// this.rewardLogs()
				// setTimeout(() => {
				// 	if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
				// 	else this.status = 'loading';
				// }, 500)
			},
			// 中奖名单
			async rewardLogs() {
				let res = await this.$http.index.rewardLogs({
					page: this.page
				})
				this.listdata = [...this.listdata, ...res.data]
				this.max_page = res.page
				if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
			},
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.boydy {
		height: 90%;
		overflow-y: auto;
	}

	.top_bg {
		height: 170px;
		display: flex;
		justify-content: space-between;
		// align-items: center;
		padding: 0 10px;
		padding-top: 25px;

		.xiaol {
			width: 170px;
		}

		.lef {
			.zuojian {
				width: 15px;
				height: 25px;
				margin-bottom: 20px;
				filter: invert(1);
			}

			.max {
				font-size: 24px;
				font-weight: bold;
				color: #fff;
				margin-bottom: 15px;
			}

			.min {
				font-size: 13px;
				font-weight: 600;
				color: #fff;
			}
		}
	}

	.zanwu {
		width: 70%;
		height: 230px;
		margin: 0 auto;

		.zan_img {
			width: 100%;
			height: 200px;
		}

		.wushuju {
			text-align: center;
			font-size: 12px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #A1A1A1;
		}
	}

	.xia_body {
		height: calc(100vh - 170px);
		background: linear-gradient(180deg, #96FCF3 0%, #DAFEFB 64%, #F8FEC6 100%);
		border-radius: 18px 18px 0px 0px;
		padding: 10px;
		position: relative;
		z-index: 9999;
		overflow-y: auto;

		.list_son {
			padding: 10px;
			width: 100%;
			background: #FFFFFF;
			border-radius: 7px;
			display: flex;
			align-items: center;
			margin-bottom: 10px;

			.left {
				flex: 2;
				display: flex;
				align-items: center;
				padding-right: 10px;

				.touxiang {
					width: 38px;
					margin-right: 10px;
					display: 1;
					height: 38px;
					border-radius: 19px;
				}

				text {
					font-size: 12px;
					font-weight: 600;
					color: #131314;
					flex: 2;
				}
			}

			.cneter {
				flex: 1;
				font-size: 13px;
				font-weight: 600;
			}

			.right {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: end;
				padding-right: 10px;

				.jiang {
					width: 48px;
					height: 48px;
					background: linear-gradient(180deg, rgba(4, 119, 253, 0.21) 0%, rgba(122, 253, 207, 0.21) 100%);
					border-radius: 7px;
				}

				text {
					font-size: 12px;
					zoom: 0.9;
				}
			}
		}

	}

	.title {
		display: flex;
		align-items: center;
		height: 45px;
		width: 100%;
		padding: 0 20px;

		.yong {
			flex: 2;
		}

		.qishu {
			flex: 1;
		}

		.huode {
			flex: 1;
			text-align: right;
		}
	}

	.mian {
		height: 100vh;
		background: linear-gradient(180deg, #0477FD 0%, #7AFDCF 100%);
		background-size: 100% 100%;
		width: 100%;
	}
</style>